{extend name="public/layout" /}
{block name="head_css"}
    <link rel="stylesheet" href="/static/index/css/header.css?v={$version}">
    <link rel="stylesheet" href="/static/index/css/video_pic_index.css?v={$version}">
{/block}

{block name="main"}
    <div class="container sam-header ">
        <div class="back">
            <a href="{:url('index/index')}">
                <div class="arrow"></div>
            </a>
        </div>

        <div class="name">{$title}</div>
        <div class="edit">
            <a href="{:url('add')}">我要发布</a>
        </div>
    </div>

    <div class="container sam-white-bg sort-box">
        <div class="sitem {if condition="$order eq 1"}chosen{/if}">
            <a href="{:url('index',array('order'=>'1'))}">点赞最高</a>
        </div>
        <div class="sitem {if condition="$order eq 2"}chosen{/if}">
            <a href="{:url('index',array('order'=>2))}">最新发布</a>
        </div>
        <div class="sitem {if condition="$order eq 3"}chosen{/if}">
            <a href="{:url('index',array('order'=>3))}">浏览最多</a>
        </div>
    </div>


    <div class="container">
        <div class="list-box row">
            {foreach name="list" key="key" item="item"}
                <a href="{:url('detail',array('id'=>$item.id))}" class="pic-item"  >
                    <div class="img-container">
                        <img src="{$item.video}?vframe/jpg/offset/0">
                    </div>
                    <div class="pic-item-container">
                        <div class="pic-item-text">
                            <div style="display: flex">
                                <div class="icon-text view">
                                    <div class="icon"></div>
                                    <div class="text">{$item.pv}</div>
                                </div>
                                <div class="icon-text like">
                                    <div class="icon"></div>
                                    <div class="text">{$item.like_num}</div>
                                </div>
                                <div class="icon-text tag">
                                    <div class="icon"></div>
                                    <div class="text">{$item.comment_num}</div>
                                </div>
                            </div>
                            <div class="title">{$item.title}</div>
                        </div>
                    </div>
                </a>
            {/foreach}
        </div>
    </div>
    {if condition="$list_end eq 0"}
        <div class="load-box">
            <div class="licon"></div>
            <div class="ltips">正在加载列表</div>
        </div>
    {/if}
{/block}
{block name="footer"}
{/block}
{block name="script"}
    {if condition="$list_end eq 0"}
        <script>
            var loadHeight = $('.load-box').height();
            var windowHeight = $(window).height();
            var scTop = 0;
            var ajaxLoading = false;
            var is_end = false;
            var page = 2;
            get_ajax();
            $(window).scroll(function(e) {
                if($(window).scrollTop() - scTop > 0&&($(window).scrollTop() + windowHeight >= $(document).height() - loadHeight)&&!ajaxLoading) {
                    get_ajax();
                }
                scTop = $(window).scrollTop();
            });
            function get_ajax() {
                $.ajax({
                    url: '{:url("ajax_list")}?page='+page+'&order='+{$order},
                    method: 'get',
                    dataType: 'json',
                    beforeSend: function() {
                        ajaxLoading = true;
                    },
                    success: function (res) {
                        page = res.data.page;
                        if(res.data.is_end == 1){
                            is_end = true;
                            $('.load-box').each(function(){
                                $(this).remove();
                            });
                        }
                        $('.list-box').append(res.data.content);
                        ajaxLoading = false;
                    },
                    error: function (xhr,status,error) {
                        alert('网络错误');
                    },
                });
                scTop = $(window).scrollTop();
            }
        </script>
    {/if}
{/block}
